<template>
    <div class="repositoryPage">
        <div class="item">
            <div class="label">当前账号</div>
            <div class="flex alighn_center" style="margin-top: 10px;">
                <div class="value">{{ userPackageInfo.userName }}</div>
            </div> 
        </div>
        <div class="item">
            <div class="label">我的套餐</div>
            <div class="flex alighn_center" style="margin-top: 10px;">
                <div class="value">{{ userPackageInfo.levelStr }}</div>
                <div class="btn" @click="dialogTableVisible10 = true">升级套餐</div>
            </div> 
        </div>
        <div class="item">
            <div class="label">支持微信</div>
            <div class="flex alighn_center" style="margin-top: 10px;">
                <div class="value">{{ userPackageInfo.wechatNum }}</div>
            </div> 
        </div>
        <div class="item">
            <div class="label">剩余token</div>
            <div class="flex alighn_center" style="margin-top: 10px;">
                <div class="value">{{ userPackageInfo.tokenNum }}</div>
            </div> 
        </div>
        <serviceVue :dialogTableVisible10="dialogTableVisible10" @beforeClose="dialogTableVisible10=false"></serviceVue>
    </div>
</template>

<script>
import serviceVue from '@/components/service.vue';
import { mapState } from 'vuex';
export default {
    components: {
        serviceVue
    },
    data(){
        return {
            dialogTableVisible10: false,
        }
    },
    computed: {
        ...mapState({
            userPackageInfo: state => state.userPackageInfo
        })
    },
    created(){
        this.$store.dispatch("getUserPackageInfo")
    },
}
</script>

<style lang="less" scoped>
.item {
    width: 100%;
    padding: 20px;
    .label {
        width: 100px;
        color: #333;
        font-weight: 600;
        font-size: 12px;
    }
    .value {
        width: 220px;
        height: 42px;
        line-height: 42px;
        padding-left: 10px;
        color: #333;
        font-weight: 600;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
    }
    .btn {
        width: 100px;
        height: 42px;
        border-radius: 5px;
        line-height: 42px;
        text-align: center;
        background: #0147fd;
        color: #fff;
        cursor: pointer;
        margin-left: 15px;
    }
}  
</style>